<template>
    <div class="article-detail-container">
        <!--  座右铭  -->
        <p class="motto"></p>

        <el-tabs v-model="activeName" type="card"  :before-leave="beforeLeaveHandle">
            <el-tab-pane label="网站首页" name="home" class="home-btn"/>

            <el-tab-pane label="文章详情" name="article">
                <!--  fix定位在最左侧的功能按钮、点赞、留言   -->
                <ArticleFeatureBtn/>

                <!--  左边的自我介绍  -->
                <main>
                    <header>
                        <!--     文章标题       -->
                        <h2>{{ blogInfo.title }}</h2>

                        <!--      文章作者信息、点击量、分类、点赞数      -->
                        <div class="base-info">
                            <!--    作者        -->
                            <div class="info author">
                                <svg-icon icon-class="author"></svg-icon>
                                <span>{{ blogInfo.author }}</span>
                            </div>
                            <!--    文章类别        -->
                            <div class="info type">
                                <svg-icon icon-class="type"></svg-icon>
                                <span @click="toArticleListHandle(articleInfo.categoryId,'blogSort')">{{
                                        blogInfo.categoryName
                                    }}</span>
                            </div>
                            <!--    点击量        -->
                            <div class="info visited">
                                <svg-icon icon-class="eye"></svg-icon>
                                <span>{{ blogInfo.clickCount ? blogInfo.clickCount : 0 }}</span>
                            </div>
                            <!--    点赞数量        -->
                            <div class="info liked">
                                <svg-icon icon-class="heart"></svg-icon>
                                <span>{{ blogInfo.likeCount ? blogInfo.likeCount : 0 }}</span>
                            </div>
                            <!--    创建时间        -->
                            <div class="info createTime">
                                <svg-icon icon-class="clock"></svg-icon>
                                <span>{{ blogInfo.createTime }}</span>
                            </div>
                        </div>

                        <!--      标签      -->
                        <div class="tags-box">
                            <el-tag
                                v-for="tag in blogInfo.tags"
                                type="warning"
                                :key="tag.tagId"
                            >
                            {{ tag.tagName }}
                            </el-tag>
                        </div>

                        <!-- <div class="article-origin">
                            <p>
                                <span> 版权 </span>
                                <span>本文为 @axin 原创文章，转载请注明文章来源</span>
                            </p>
                        </div> -->

                    </header>
                    <article
                        class="html-box"
                        v-html="blogInfo.content"
                        v-highlight
                    />
                    <footer style="max-width: 920px;margin: 0 auto;padding-bottom: 230px;">
                        <!-- 关注我、打赏 -->

                        <div class="extra-feature-btn-box">
                            <el-button @click="showPublicAccountDialog" type="danger" icon="el-icon-s-promotion">关注我</el-button>
                            <el-button @click="showRewardDialog" type="danger" icon="el-icon-bank-card">打赏一下</el-button>
                        </div>

                        <div ref="comment" style="font-size:15px; color:#000;"><svg-icon icon-class="comment"></svg-icon> 留言({{ total }})</div>
                        <hr>
                        
                        <div style="padding-bottom: 20px">
                            <CommentList :commentList="commentList" :blogInfo="blogInfo"></CommentList>
                        </div>
                        
                    </footer>
                </main>
                <!--  右边文章目录  -->
                <aside>
                    <BlogCatalogue
                        ref="stick-box2"
                        v-bind="catalogProps"
                        :htmlContent="blogInfo.content"
                    />
                </aside>
            </el-tab-pane>
        </el-tabs>


    </div>
</template>

<script>

import {throttle} from "@/utils/utilFn";

import {getBlogDetail} from '@/api/blog'
import {getCommentList} from '@/api/comment'
// 目录
import BlogCatalogue from "@/components/BlogCatalogue/BlogCatalogue";
// fix定位在最左侧的功能按钮、点赞、留言
import ArticleFeatureBtn from "../../components/ArticleFeatureBtn/ArticleFeatureBtn";
import CommentList from "../../components/CommentList/CommentList";
// import CommentBox from "../../components/CommentBox/CommentBox";


export default {
    name: "ArticleDetail",
    props: {},
    components: {
        BlogCatalogue,
        ArticleFeatureBtn,
        CommentList
    },
    data() {
        return {
            activeName: 'article',
            blogId: null,
            blogInfo: {},
            blogContent: '',
            // 获取评论参数
            searchCommentParam: {
                pageNum: 1, // 当前页
                pageSize: 10, // 列表总条数
            },
            // 评论列表
            commentList: [],
            total: 0,

            catalogProps: {
                // 内容容器selector(必需)
                container: '.html-box',
                levelList: ["h1","h2", "h3", "h4"],
                watch: true,
            },


            /*====================  留言板 start  ============================*/
            form: {
                commentContent: null,
                commentSource: 3, // 评论来源：-1，关于我；1，留言板；2，专题；3，文章
                sourceId: '', // 来源的id：存放对应来源的id，专题有专题uid，文章有文章uid，留言板uid给个默认值1，关于我默认值-1
                commentStatus: 1, // 评论状态：1，待审核；2，通过；3，违规评论
                commentPersonId: null, // 评论人：评论人的id
                commentLayer: 1, // 评论的层级，总共有五层，1，2，3，4，5
            },

            searchParam: {
                commentSource: 3,
                sourceId: '',
            },

            /*====================  留言板 end  ============================*/

            likeCountList: [], // 所有的点赞记录

            isShowRewardDialog: false, // 是否展示打赏框


        }
    },
    methods: {

        // 打赏我
        showRewardDialog() {
            // this.$refs['RewardDialog'].showDialog()
        },
        // 关注我
        showPublicAccountDialog() {
            // this.$refs['PublicAccountDialog'].showDialog()
        },


        // async getAllArticleLike() {
        //     let {data} = await blogLikeApi.queryBlogLikeAll2({
        //         blogId: this.searchParam.sourceId
        //     })
        //     this.likeCountList = data.data
        // },


        // async likeArticleHandle(isAlreadyLike, recordUid) {
        //     // 判断是否登录，未登录的话先登录
        //     if (!this.isLogin) {
        //         this.goToLogin()
        //     } else {
        //         if (isAlreadyLike) {
        //             // 删除自己的记录
        //             let findItem = this.likeCountList.find((item) => {
        //                 if (item.like_person_id === this.loginUserInfo.uid) {
        //                     return item
        //                 }
        //             })
        //             await blogLikeApi.deleteBlogLikeByUid([findItem.uid])
        //         } else {
        //             // 新增一条自己的记录
        //             await blogLikeApi.saveBlogLike({
        //                 blogId: this.searchParam.sourceId,
        //                 likePersonId: this.loginUserInfo.uid,
        //             })
        //         }
        //         await this.getAllArticleLike()

        //     }
        // },

        // goToLogin() {
        //     this.$store.commit(indexMutation.SHOW_LOGIN_DIALOG)
        // },

        // toComment() {
        //     const commentBox = this.$refs['comment']
        //     commentBox.scrollIntoView(true)
        // },

        // toArticleListHandle(uid, type) {
        //     const routerData = this.$router.resolve({
        //         path: `/articleList?${type}=${uid}`
        //     })
        //     window.open(routerData.href, '_blank')
        // },

        // 固定目录，需要智能吸附在顶部的div，站在这不要动
        standHereAndDoNotMove() {
            let offset = 150;
            let scrollTop = document.documentElement.scrollTop; //当前的的位置
            let stickBox = this.$refs['stick-box2']
            if (stickBox) {
                if (scrollTop > offset) {
                    stickBox.$el.classList.add('stand-here2')
                } else {
                    stickBox.$el.classList.remove('stand-here2')
                }
            }

        },

        getBlogDetail(blogId) {
            getBlogDetail(blogId).then(response => {
                this.blogInfo = response.data;
            })
        },
        getCommentList(blogId) {
            this.searchCommentParam.blogId = blogId
            getCommentList(this.searchCommentParam).then(response => {
                this.commentList = response.rows;
                this.total = response.total
            })
        },
        beforeLeaveHandle(activeName, oldActiveName) {
            if (activeName === 'home') {
                this.$router.push('/')
                return false
            }
        },
    },
    computed: {
        // baseUrl() {
        //     let articleLinkBaseUrl
        //     if (process.env.NODE_ENV === 'development') { // 开发环境
        //         articleLinkBaseUrl = articleDetailBaseUrl.articleBaseUrlDevelopment
        //     } else { // 生产环境
        //         if (this.isDemoVersion) {
        //             articleLinkBaseUrl = articleDetailBaseUrl.articleBaseUrlDemo
        //         } else {
        //             articleLinkBaseUrl = articleDetailBaseUrl.articleBaseUrlProduction
        //         }
        //     }
        //     return articleLinkBaseUrl
        // },
        // // 是否是演示版本
        // isDemoVersion() {
        //     return isDemoVersion // 加载到了全局，直接获取
        // },
        // loginUserInfo() {
        //     return this.$store.state.user.loginUserInfo
        // },
    },
    watch: {},
    mounted() {
        window.addEventListener("scroll", throttle(() => {
            this.standHereAndDoNotMove()
        }, 100, 100))
    },
    created() {
        let {id} = this.$route.params
        this.blogId = id
        this.getBlogDetail(id)
        this.getCommentList(id)

        // /*====================  留言板 start  ============================*/
        // this.form.sourceId = id
        // this.searchParam.sourceId = id
        // this.getCommentList()
        // /*====================  留言板 end  ============================*/

        // this.getAllArticleLike()
    }
}
</script>

<style scoped lang="scss">
@import "BlogDetail";
</style>
